<template>
  <div class="page">
    <div class="info-container">
      <img :src="productDetail.img" class="img">
      <div class="text-info-container">
        <span class="text-info-title">{{ productDetail.name }}</span>
        <span class="mt16">商品类目:{{ productDetail.typesStr }}</span>
        <div class="out-url mt16">
          <span class=" g-single-line mr16" style="width: 400px;">商品链接:{{ productDetail.outUrl }}</span>
          <div class="icon-button mr16" @click="copyText(productDetail.outUrl)">
            <img src="@i/icon/copy-icon.png" class="icon">
            <span>复制</span>
          </div>
          <div class="icon-button" @click="onNewUrl(productDetail.outUrl)">
            <img src="@i/icon/detail-icon.png" class="icon">
            <span>shein详情</span>
          </div>
        </div>
        <div class="mt16 buttons">
          <span class="uncollect-button" v-if="productDetail.subProduct" @click="onCollect(false)">取消关注该商品</span>
          <span class="collect-button" v-else @click="onCollect(true)">关注该商品</span>
          <span class="uncollect-button" v-if="productDetail.subType" @click="onCollectType(false)">取消关注该类目</span>
          <span class="collect-button" v-else @click="onCollectType(true)">关注该类目</span>
        </div>
      </div>
    </div>
    <span class="title">近期商品数据统计</span>
    <div class="data-container">
      <div class="data-item" v-for="(item) in dataListKey" :key="item.key">
        <span class="data-item-label">
          {{ item.label }}
        </span>
        <span class="data-item-value">
          {{ productDetail[item.key] || '-' }}
        </span>
      </div>
    </div>
    <span class="title">商品销量趋势</span>
    <div id="container"></div>
    <span class="title">商品销量趋势(详情)</span>
    <a-table :dataSource="productDatas" :columns="columns"></a-table>
  </div>
</template>

<script setup lang="ts">
import { copyText } from '@u/tools'
import { ref, onMounted } from 'vue'
import Pagination from "@c/Pagination/index.vue";
import { subType, unSubType } from '@r/api/userSub'
import { getSheinProduct, getSheinProductDatas } from '@r/api/product'
let listData = ref<any[]>([])
import { subProduct, unSubProduct } from '@r/api/userSub'
import { message } from 'ant-design-vue';
import dayjs, { Dayjs } from 'dayjs'
import { useRoute } from 'vue-router'
import { Chart } from '@antv/g2';
const appRoute = useRoute()
const productDetail = ref<any>({})
const productDatas = ref<any[]>([])
const pageInfo = ref({
  pageSize: 10,
  pageNumber: 1,
  total: 0
})
const dataListKey = [
  {
    key: 'price',
    label: '价格（$）'
  },
  {
    key: 'sales',
    label: '销量'
  },
  {
    key: 'gmv',
    label: '销售额（$）'
  },
  {
    key: 'goodRatio',
    label: '评分'
  },
  {
    key: 'commentNum',
    label: '评价数'
  },
]
const columns = [
  {
    title: '日期',
    dataIndex: 'timeStr',
  },
  //  {
  //   title: '销售量',
  //   dataIndex: 'sales',
  // },
  {
    title: '价格',
    dataIndex: 'price',
  },
  {
    title: '销售额',
    dataIndex: 'gmv',
  },
]
onMounted(() => {
  getData()
})
function onNewUrl(outUrl: string) {
  window.open(outUrl, '_blank')
}
function onCollectType(hadCollect: boolean) {
  if (hadCollect) {
    subType({ typeId: productDetail.value.typeId }).then(res => {
      console.log(res);
      productDetail.value.subType = !productDetail.value.subType
      message.success('关注成功')
    })
  } else {
    unSubType({ typeId: productDetail.value.typeId }).then(res => {
      productDetail.value.subType = !productDetail.value.subType
      message.success('取消成功')
    })
  }
}
function onCollect(hadCollect: boolean) {
  if (hadCollect) {
    subProduct({ productId: productDetail.value.id }).then(res => {
      productDetail.value.subProduct = !productDetail.value.subProduct
      message.success('关注成功')
    })
  } else {
    unSubProduct({ productId: productDetail.value.id }).then(res => {
      productDetail.value.subProduct = !productDetail.value.subProduct
      message.success('取消成功')
    })
  }
}
function getData() {
  getSheinProduct({
    productId: appRoute.query.id
  }).then((res: any) => {
    console.log(res);
    res.gmv = parseFloat((res.price * res.sales).toFixed(2))
    let typesStr = ''
    let typeId = ''
    res.types.map((item: any, index: number) => {
      if (index) {
        typesStr = typesStr + '/'
      }
      typesStr = typesStr + item.name
      typeId = item.id
    })
    res.typesStr = typesStr
    res.typeId = typeId
    productDetail.value = res
  })
  getSheinProductDatas({
    productId: appRoute.query.id
  }).then((res: any) => {
    res = res.map((item: any) => {
      item.gmv = parseFloat((item.price * item.sales).toFixed(2))
      item.timeStr = dayjs(item.time).format('YYYY-MM-DD')
      return item
    })
    productDatas.value = res
    console.log(productDatas.value);
    renderFunc()
  })
}
function renderFunc() {
  // 初始化图表实例
  const chart = new Chart({
    container: 'container',
    autoFit: true
  });
  // 准备数据
  let newData = [...productDatas.value].sort((value1, value2) => {
    const val1 = value1.time;
    const val2 = value2.time;
    // return val2-val1 降序排列,return val1-val2; 升序
    // if (type === 'asc') {
    // return val2 - val1
    // } else {
    return val1 - val2
    // }
  });
  newData = newData.map(item => {
    item['销量'] = item.sales
    item['销售额'] = item.gmv
    return item
  })
  chart.data(newData);
  // 声明可视化
  chart
    .interval()
    .encode('x', 'timeStr')
    .encode('y', '销量')
    .encode('color', () => '销量')
    .encode('series', () => '销量')
    .axis('y', { title: '销量' })
    .axis('x', { title: '日期' });
  chart
    .interval()
    .encode('x', 'timeStr')
    .encode('y', '销售额')
    .encode('color', () => '销售额')
    .encode('series', () => '销售额')
    .scale('y', { independent: true })
    .axis('x', { title: '日期' })
    .axis('y', { position: 'right', grid: null, title: '销售额' })

  // 渲染可视化
  chart.render();
}
// function onPageChange({
//   page_no,
//   page_size,
// }: {
//   page_no: number;
//   page_size: number;
// }) {
//   pageInfo.value.pageNumber = page_no;
//   pageInfo.value.pageSize = page_size;
//   getList();
// }
</script>

<style scoped lang="less">
.page {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
  padding: 20px;

  .info-container {
    display: flex;
    flex-direction: row;
    padding-bottom: 30px;
    border-bottom: 1px solid #EFEFEF;

    .img {
      height: 160px;
      width: 160px;
      margin-right: 20px;
      border: 1px solid #eee;
      border-radius: 10px;
    }

    .text-info-container {
      display: flex;
      flex-direction: column;
      flex: 1;
      font-size: 16px;
      font-weight: normal;
      line-height: 16px;
      letter-spacing: 0px;
      color: #666666;

      .text-info-title {
        font-size: 20px;
        font-weight: bold;
        line-height: 20px;
        letter-spacing: 0px;
        color: #333333;
      }

      .out-url {
        display: flex;
        flex-direction: row;
        align-items: center;

        .icon-button {
          height: 40px;
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 12px;
          color: #666666;
          cursor: pointer;
        }

        .icon {
          height: 12px;
          width: 12px;
          margin-right: 4px;
        }
      }

      .buttons {
        display: flex;
        flex-direction: row;
      }

      .collect-button {
        padding: 0 16px;
        height: 32px;
        border-radius: 20px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background: linear-gradient(90deg, #FA7D54 0%, #FF3F3F 99%);
        box-shadow: 0px 4px 10px 0px rgba(254, 68, 65, 0.3);
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        color: #FFFFFF;
        cursor: pointer;
        margin-right: 16px;
      }

      .uncollect-button {
        padding: 0 16px;
        height: 32px;
        border-radius: 20px;
        background: #FFFFFF;
        border: 1px solid #FF6923;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        line-height: 14px;
        text-align: center;
        letter-spacing: 0em;
        color: #FF6923;
        cursor: pointer;
        margin-right: 16px;
      }
    }
  }

  .title {
    font-size: 20px;
    font-weight: bold;
    line-height: 20px;
    letter-spacing: 0px;
    color: #333333;
    margin: 24px 0;
  }

  .data-container {
    display: flex;
    flex-direction: row;
    align-items: center;

    .data-item {
      margin-right: 15px;
      width: 220px;
      height: 110px;
      border-radius: 10px;
      opacity: 1;
      background: #F7F9FA;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 24px 22px;

      .data-item-label {
        font-size: 16px;
        font-weight: normal;
        line-height: 16px;
        letter-spacing: 0px;
        color: #999999;
      }

      .data-item-value {
        font-size: 28px;
        font-weight: 900;
        line-height: 28px;
        color: #333333;
      }
    }
  }

  // height: calc(100vh - 100px);
  #container {
    width: calc(100% - 40px);
    height: 300px;
  }
}
</style>